import React, { Component,Fragment } from 'react';
import {Card,Modal,Row,Col} from 'antd'
import './ui.less'
export default class Gallery extends Component {
    state = {
        visible:false,
        currentImg:''
    }
    openGallery = (imgSrc) => {
        this.setState({
            visible:true,
            currentImg:'/gallery/'+imgSrc
        })
    }
    render() {
        const imgs = [
            ['1.png', '2.png', '3.png', '4.png', '5.png'],
            ['6.png', '7.png', '8.png', '9.png', '10.png'],
            ['11.png', '12.png', '13.png', '14.png', '15.png'],
            ['16.png', '17.png', '18.png', '19.png', '20.png'],
            ['21.png', '22.png', '23.png', '24.png', '25.png']
        ]
        const imgList = imgs.map((list)=>list.map((item)=>
            <Card
                hoverable
                style={{marginBottom:30}}
                cover={<img alt="" src={`/gallery/${item}`} />}
                onClick = {() => this.openGallery(item)}
            >
                <Card.Meta
                    title="React Admin"
                    description="I love Imooc"
                />
            </Card>
        ))
        return (
            <Fragment>
                <Row gutter="30">
                    <Col span={5}>
                        {/*从上到下1-5.png*/}
                        {imgList[0]}
                    </Col>
                    <Col span={5}>
                        {imgList[1]}
                    </Col>
                    <Col span={5}>
                        {imgList[2]}
                    </Col>
                    <Col span={5}>
                        {imgList[3]}
                    </Col>
                    <Col span={4}>
                        {imgList[4]}
                    </Col>
                    <Modal
                        width={500}
                        height={500}
                        title="图片画廊"
                        visible={this.state.visible}
                        onCancel={() => {
                            this.setState({
                                visible:false
                            })
                        }}
                        footer={null}
                    >
                        {<img style={{width:'100%'}} src={this.state.currentImg} alt=""/>}
                    </Modal>
                </Row>
            </Fragment>
        )
    }
}